<script lang="jsx">
import {h, markRaw, watchEffect} from 'vue'
import {router} from "@inertiajs/vue3";
import {route} from 'ziggy-js'
import SvgIcon from '@/components/SvgIcon.vue'

export default defineComponent({
    name: 'MinorMenu',
    components: {SvgIcon},
    props:{
        items: {
            type: Array,
            default: () => [],
        },
    },
    setup(props) {
        const openKeys = ref([])
        const selectedKey = ref([])
        // 初始化选中状态
        watchEffect(() => {
            const url = route().current()
            const arr = [];
            props.items.forEach((element) => {
                if (element.children?.length > 0) {
                    element.children.forEach((item) => {

                        if (item.name === url) {
                            arr.push(element.name)
                            arr.push(item.name)
                        }
                    })
                }else{
                    if (element.name === url) {
                        arr.push(element.name)
                    }
                }
            })
            selectedKey.value = arr
            openKeys.value = arr
        })

        const handleClick = (item) => {
            if (item.params){
                router.visit(route(item.name,item.params))
            }else{
                router.visit(route(item.name))
            }
        }

        const SvgIconRaw = markRaw(SvgIcon)
        const renderIcon = (iconName = 'icon-default') => h(SvgIconRaw, {
            name: iconName,
            size: '16px',
        })

        const renderSubMenu = () => {
            const travel = (items, nodes = []) => {
                items?.forEach((element) => {
                    const hasChildren = element?.children?.length > 0
                    const title = element?.title || '菜单'
                    const iconName = element?.icon || 'icon-default'


                    const node = hasChildren  ? (
                        <a-sub-menu
                            key={ element?.params ? element?.name + element?.params : element?.name}
                            v-slots={{
                                icon: () => renderIcon(iconName),
                                title: () => title,
                            }}
                        >
                            {travel(element.children)}
                        </a-sub-menu>
                    ) : (
                        <a-menu-item
                            key={ element?.params ? element?.name + element?.params : element?.name}
                            v-slots={{
                                icon: () => renderIcon(iconName),
                            }}
                            onClick={() => handleClick(element)}
                        >
                            {title}
                        </a-menu-item>
                    )

                    nodes.push(node)
                })

                return nodes
            }

            return travel(props.items)
        }

        return () => (
            <a-menu
                mode="vertical"
                class="size-full"
                v-model:open-keys={openKeys.value}
                selected-keys={selectedKey.value}
            >
                {renderSubMenu()}
            </a-menu>
        )
    }
})
</script>


<style lang="scss" scoped>

.arco-menu-light {
    --color-menu-light-bg: var(--aside-bg-color) !important;
    //--color-menu-light-bg: var(--sub-menu-bg-color) !important;
    //background: var(--color-menu-light-bg)!important;
    background:transparent !important;
}


.arco-menu-item.arco-menu-selected {
    background: var(--menu-active-bg-color) !important;
    box-shadow: var(--menu-box-shadow);
    border-radius: 8px;
    color: #fff !important;

    .arco-icon {
        color: var(--menu-text-color) !important;
    }

    .arco-menu-icon {
        color: var(--menu-text-color) !important;
    }
}

:deep(.arco-menu-inline-header.arco-menu-selected) {
    border-radius: 8px;
    color: var(--menu-text-color) !important;
    font-weight: 500;
    .arco-icon {
        color: var(--menu-text-color) !important;
    }

    .arco-menu-icon {
        color: var(--menu-text-color) !important;
    }
}

:deep(.arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover )
{
    background-color: var(--menu-active-bg-color) !important;
}

.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: transparent;
}
.arco-menu-light .arco-menu-item .arco-icon{
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-item:hover,
.arco-menu-light .arco-menu-inline-header:hover {
    background: var(--menu-active-bg-color) !important;
    color: var(--menu-text-color) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    //background: var(--menu-active-bg-color) !important;
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: transparent !important;
}
.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: var(--color-menu-light-bg);
}

.arco-menu-light .arco-menu-inline-header .arco-menu-icon {
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-item .arco-icon,
.arco-menu-light .arco-menu-group-title .arco-icon,
.arco-menu-light .arco-menu-pop-header .arco-icon,
.arco-menu-light .arco-menu-inline-header .arco-icon,
.arco-menu-light .arco-menu-item .arco-menu-icon,
.arco-menu-light .arco-menu-group-title .arco-menu-icon,
.arco-menu-light .arco-menu-pop-header .arco-menu-icon,
.arco-menu-light .arco-menu-inline-header .arco-menu-icon {
    color: var(--menu-text-color) !important;
}




</style>
